<template>
  <div class="house-detail-container">
    <!-- 返回按钮和标题 -->
    <div class="header">
      <el-button type="text" @click="goBack" class="back-button">
        <el-icon><arrow-left /></el-icon> 返回列表
      </el-button>
      <h1 class="title">{{ house.house?.title || '房源详情' }}</h1>
      <div class="status-tag">
        <el-tag :type="getStatusTagType(house.house?.status)" size="large">
          {{ getStatusLabel(house.house?.status) }}
        </el-tag>
      </div>
    </div>

    <!-- 主要内容区域 - 改为表单样式布局 -->
    <div class="form-wrapper">
      <el-tabs type="border-card" class="form-tabs">
        <!-- 基础信息 -->
        <el-tab-pane label="基础信息">
          <div class="tab-content">
            <!-- 图片展示区域 -->
            <div class="image-section">
              <el-carousel :interval="5000" arrow="always" height="400px" indicator-position="outside">
                <el-carousel-item v-for="(image, index) in galleryImages" :key="index">
                  <div class="image-wrapper" @click="handleImageClick(image)">
                    <el-image
                        :src="image.image_url"
                        fit="cover"
                        style="width: 100%; height: 100%"
                        :preview-src-list="getAllImages()"
                        :initial-index="index"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                    >
                      <template #error>
                        <div class="image-error">
                          <el-icon><picture /></el-icon>
                          <span>图片加载失败</span>
                        </div>
                      </template>
                    </el-image>
                    <div v-if="image.is_cover" class="cover-badge">封面</div>
                    <!-- 图片操作按钮 -->
                    <div class="image-actions" v-if="isEditing">
                      <el-button
                          v-if="!image.is_cover"
                          type="primary"
                          size="small"
                          circle
                          @click.stop="handleSetCover(image)"
                      >
                        <el-icon><star /></el-icon>
                      </el-button>
                      <el-button
                          type="danger"
                          size="small"
                          circle
                          @click.stop="handleRemoveImage(image.image_id)"
                      >
                        <el-icon><delete /></el-icon>
                      </el-button>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>

              <div v-if="isEditing" class="upload-area">
                <el-upload
                    action="#"
                    multiple
                    :auto-upload="false"
                    :on-change="handleImageChange"
                    :show-file-list="false"
                    accept="image/*"
                    list-type="picture-card"
                >
                  <el-icon><plus /></el-icon>
                  <div class="upload-text">上传图片</div>
                </el-upload>
              </div>
            </div>

            <el-form label-width="120px" label-position="top">
              <el-form-item label="房源标题">
                <el-input v-model="house.house.title" :readonly="!isEditing" />
              </el-form-item>

              <!-- 修改后的房源状态 -->
              <el-form-item label="房源状态" v-if="isEditing">
                <el-select
                    v-model="house.house.status"
                    style="width: 100%"
                >
                  <el-option label="待审核" value="pending" />
                  <el-option label="已发布" value="published" />
                  <el-option label="已出租" value="rented" />
                  <el-option label="维护中" value="maintenance" />
                  <el-option label="已下架" value="offline" />
                </el-select>
              </el-form-item>
              <el-form-item label="房源状态" v-else>
                <el-input :value="getStatusLabel(house.house?.status)" readonly />
              </el-form-item>


              <el-row :gutter="20">
                <el-col :span="12">
                  <!-- 修改后的物业类型 -->
                  <el-form-item label="物业类型">
                    <el-select
                        v-model="house.house.property_type"
                        :disabled="!isEditing"
                        style="width: 100%"
                    >
                      <el-option label="公寓" value="公寓" />
                      <el-option label="别墅" value="别墅" />
                      <el-option label="商铺" value="商铺" />
                      <el-option label="房间" value="房间" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="租赁类型">
                    <el-select
                        v-model="house.house.rental_type"
                        :disabled="!isEditing"
                        style="width: 100%"
                    >
                      <el-option label="整租" value="整租" />
                      <el-option label="合租" value="合租" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="面积(㎡)">
                    <el-input-number
                        v-model.number="house.house.area"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="价格(元/月)">
                    <el-input-number
                        v-model.number="house.house.price"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="押金(元)">
                    <el-input-number
                        v-model.number="house.house.deposit"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="0"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="卧室数量">
                    <el-input-number
                        v-model.number="house.house.bedroom_count"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客厅数量">
                    <el-input-number
                        v-model.number="house.house.livingroom_count"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="卫生间数量">
                    <el-input-number
                        v-model.number="house.house.bathroom_count"
                        :disabled="!isEditing"
                        style="width: 100%"
                        :min="0"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="房源描述">
                <el-input
                    v-model="house.house.description"
                    type="textarea"
                    :rows="4"
                    :readonly="!isEditing"
                    placeholder="请输入房源描述信息"
                />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 地址信息 -->
        <el-tab-pane label="地址信息">
          <div class="tab-content">
            <el-form label-width="120px" label-position="top">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="省份">
                    <el-input
                        v-model="house.address.province"
                        :readonly="!isEditing"
                        placeholder="请输入省份"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="城市">
                    <el-input
                        v-model="house.address.city"
                        :readonly="!isEditing"
                        placeholder="请输入城市"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="区县">
                    <el-input
                        v-model="house.address.district"
                        :readonly="!isEditing"
                        placeholder="请输入区县"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="街道">
                    <el-input
                        v-model="house.address.street"
                        :readonly="!isEditing"
                        placeholder="请输入街道"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="详细地址">
                <el-input
                    v-model="house.address.detail"
                    type="textarea"
                    :rows="3"
                    :readonly="!isEditing"
                    placeholder="请输入详细地址"
                />
              </el-form-item>

              <div class="map-container" v-if="showMap">
                <!-- 这里可以集成地图组件 -->
                <div class="map-placeholder">
                  <el-icon><map-location /></el-icon>
                  <span>地图位置</span>
                </div>
              </div>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 设施信息 -->
        <el-tab-pane label="设施信息">
          <div class="tab-content">
            <el-form label-width="120px" label-position="top">
              <el-form-item label="设施配置">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(value, key) in house.facility" :key="key">
                    <div class="facility-item">
                      <el-checkbox
                          v-model="house.facility[key]"
                          :disabled="!isEditing"
                      >
                        <el-icon :class="{'available': house.facility[key], 'unavailable': !house.facility[key]}">
                          <component :is="getFacilityIcon(key)" />
                        </el-icon>
                        <span :class="{'available': house.facility[key], 'unavailable': !house.facility[key]}">
                          {{ getFacilityLabel(key) }}
                        </span>
                      </el-checkbox>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 描述和评价 -->
        <el-tab-pane label="评价">
          <div class="tab-content">
            <div class="review-section">
              <!-- 评价统计 -->
              <div class="review-summary" v-if="house.review_status">
        <span class="average-rating">
          平均评分: {{ house.review_status.average_rating?.toFixed(1) || 0 }}
        </span>
                <span class="review-count">
          (共{{ house.review_status.total_reviews || 0 }}条评价)
        </span>
              </div>

              <!-- 评价列表 -->
              <div v-if="house.reviews?.items?.length > 0">
                <div v-for="review in house.reviews.items" :key="review.review_id" class="review-item">
                  <div class="review-header">
                    <div class="user-info">
                      <span class="user-name">用户{{ review.user_id }}</span>
                      <el-rate
                          v-model="review.overall_rating"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value} 分"
                      />
                    </div>
                    <div class="review-time">{{ formatReviewTime(review.review_time) }}</div>
                  </div>

                  <!-- 详细评分 -->
                  <div class="review-ratings" v-if="review.ratings">
                    <div class="rating-details">
                      <span>清洁: {{ review.ratings.cleanliness }}分</span>
                      <span>位置: {{ review.ratings.location }}分</span>
                      <span>设施: {{ review.ratings.facility }}分</span>
                      <span>性价比: {{ review.ratings.value }}分</span>
                      <span>沟通: {{ review.ratings.communication }}分</span>
                    </div>
                  </div>

                  <div class="review-comment">{{ review.comment || '暂无评论内容' }}</div>
                </div>

                <!-- 分页控件 -->
                <el-pagination
                    v-if="house.reviews.pages > 1"
                    @current-change="handlePageChange"
                    :current-page="house.reviews.current_page"
                    :page-size="house.reviews.per_page || 5"
                    :total="house.reviews.total"
                    layout="prev, pager, next"
                    class="pagination"
                />
              </div>
              <div v-else class="no-reviews">
                <el-empty description="暂无评价" />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 底部操作栏 -->
      <div class="form-actions">
        <el-button @click="handleCancel" size="large">
          {{ isEditing ? '取消编辑' : '返回' }}
        </el-button>

        <template v-if="!isEditing">
          <el-button type="primary" @click="startEditing" size="large">编辑房源</el-button>
          <el-button
              type="danger"
              @click="handleDelete"
              v-if="house.house?.status !== 'rented'"
              size="large"
          >
            删除房源
          </el-button>
        </template>

        <template v-else>
          <el-button
              type="success"
              @click="handleSave"
              size="large"
              :loading="saving"
          >
            保存信息
          </el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  ArrowLeft, Location, MapLocation, Picture,
  House, Food, WindPower, Sunny,
  HotWater, Connection, Monitor,
  Refrigerator, Refresh, Plus,
  Star, Delete
} from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import common_util from '../../util/common_util.js'

const route = useRoute()
const router = useRouter()
const houseId = ref(Number(route.params.houseId))
const currentPage = ref(1)
const pageSize = ref(5)

const house = ref({
  house: {},
  address: {},
  facility: {},
  images: {},
  review_status: {},
  reviews: {}
})

const originalHouseData = ref(null)
const isEditing = ref(false)
const saving = ref(false)
const loading = ref(false)
const showMap = ref(true)
const newImages = ref([])

// 计算属性获取画廊图片
// 修改计算属性获取画廊图片
const galleryImages = computed(() => {
  const images = []
  if (house.value.images?.cover?.image_url) {
    images.push({
      ...house.value.images.cover,
      is_cover: true,
      id: house.value.images.cover.image_id  // 确保有id字段
    })
  }
  if (house.value.images?.gallery) {
    images.push(...house.value.images.gallery.map(img => ({
      ...img,
      id: img.image_id  // 确保有id字段
    })))
  }
  return images.length > 0 ? images : [{image_url: '', is_cover: false}]
})

// 状态映射
const statusMap = {
  pending: { label: '待审核', type: 'warning' },
  published: { label: '已发布', type: 'success' },
  rented: { label: '已出租', type: 'info' },
  maintenance: { label: '维护中', type: 'warning' },
  offline: { label: '已下架', type: '' }
}

// 设施图标映射
const facilityIcons = {
  has_wifi: Connection,
  has_tv: Monitor,
  has_ac: WindPower,
  has_heating: Sunny,
  has_kitchen: Food,
  has_washer: Refresh,
  has_lift: House,
  has_parking: House,
  has_water_heater: HotWater,
  has_refrigerator: Refrigerator
}

// 设施标签映射
const facilityLabels = {
  has_wifi: '无线网络',
  has_tv: '电视',
  has_ac: '空调',
  has_heating: '暖气',
  has_kitchen: '厨房',
  has_washer: '洗衣机',
  has_lift: '电梯',
  has_parking: '停车位',
  has_water_heater: '热水器',
  has_refrigerator: '冰箱'
}

// 获取房源详情
const fetchHouseDetail = async () => {
  loading.value = true
  try {
    const response = await axios.get(`/api/houses/${houseId.value}`, {
      params: {
        page: currentPage.value,
        per_page: pageSize.value
      },
      headers: common_util.accessHeader()
    })

    if (response.data.code === 0) {
      house.value = response.data.data
      originalHouseData.value = JSON.parse(JSON.stringify(response.data.data))
    } else {
      ElMessage.error(response.data.msg || '获取房源详情失败')
      if (response.data.code === 404) {
        router.push({ name: 'my-houses' })
      }
    }
  } catch (error) {
    ElMessage.error('获取房源详情失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 开始编辑
const startEditing = () => {
  isEditing.value = true
  newImages.value = []
}

// 取消编辑
const handleCancel = () => {
  if (isEditing.value) {
    ElMessageBox.confirm('确定要取消编辑吗？所有更改将丢失', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (originalHouseData.value) {
        house.value = JSON.parse(JSON.stringify(originalHouseData.value))
      }
      isEditing.value = false
      newImages.value = []
    }).catch(() => {})
  } else {
    goBack()
  }
}

// 处理图片上传
// 修改handleImageChange方法
const handleImageChange = (file) => {
  const newImage = {
    file: file.raw,
    preview: URL.createObjectURL(file.raw),
    is_cover: false,
    // 确保有唯一的临时ID
    id: 'temp-' + Date.now() + '-' + Math.floor(Math.random() * 1000)
  }

  // 如果没有封面图片，自动将第一张设为封面
  if (!house.value.images?.cover?.image_url && newImages.value.length === 0) {
    newImage.is_cover = true
  }

  newImages.value.push(newImage)
  house.value.images.gallery = [...(house.value.images.gallery || []), newImage]
}


// 修改handleSetCover方法
const handleSetCover = async (image) => {
  try {
    console.log('Current image object:', image)

    // 获取有效的图片ID
    const effectiveImageId = image.imageid || image.image_id || image.id

    if (!effectiveImageId) {
      throw new Error('无法获取有效的图片ID')
    }

    if (effectiveImageId.toString().startsWith('temp-')) {
      // 处理新上传的图片
      const formData = new FormData()
      formData.append('file', image.file)
      formData.append('house_id', houseId.value)
      formData.append('is_cover', 'true') // 注意这里使用字符串'true'

      const headers = common_util.accessHeader()
      delete headers['Content-Type'] // 让浏览器自动设置Content-Type

      const response = await axios.post(
          `/api/house-images`,
          formData,
          { headers }
      )

      if (response.data.code === 0) {
        ElMessage.success('图片上传并设为封面成功')
        await fetchHouseDetail()
      } else {
        throw new Error(response.data.msg || '上传图片失败')
      }
      return
    }

    // 对于已存在的图片，使用form-data格式发送请求
    const formData = new FormData()
    formData.append('is_cover', 'true') // 注意这里使用字符串'true'

    const response = await axios.put(
        `/api/house-images/${effectiveImageId}`,
        formData,
        {
          headers: {
            ...common_util.accessHeader(),
            'Content-Type': 'multipart/form-data'
          }
        }
    )

    if (response.data.code === 0) {
      ElMessage.success('封面设置成功')
      await fetchHouseDetail()
    } else {
      throw new Error(response.data.msg || '设置封面失败')
    }
  } catch (error) {
    console.error('设置封面错误详情:', {
      error: error.message,
      imageObject: image,
      houseId: houseId.value
    })
    ElMessage.error(`设置封面失败: ${error.message}`)
  }
}

// 删除图片
const handleRemoveImage = async (imageId) => {
  try {
    await ElMessageBox.confirm('确定要删除这张图片吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    if (imageId) {
      // 已存在的图片，调用API删除
      await axios.delete(
          `/api/house-images/${imageId}`,
          { headers: common_util.accessHeader() }
      )
    }

    // 从当前显示中移除
    if (house.value.images.cover?.image_id === imageId) {
      house.value.images.cover = null
    } else {
      house.value.images.gallery = house.value.images.gallery.filter(
          img => img.image_id !== imageId
      )
    }

    // 从新图片列表中移除
    newImages.value = newImages.value.filter(img => img.image_id !== imageId)

    ElMessage.success('图片删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除失败')
    }
  }
}



// 保存信息时上传新图片
// 修改handleSave方法
const handleSave = async () => {
  saving.value = true
  try {
    // 1. 处理上传新图片
    if (newImages.value.length > 0) {
      // 由于后端API可能只支持单张上传，我们需要逐个上传
      for (const image of newImages.value) {
        const formData = new FormData()
        formData.append('file', image.file)
        formData.append('house_id', houseId.value)
        formData.append('is_cover', image.is_cover) // 使用与后端一致的字段名

        const headers = common_util.accessHeader()
        delete headers['Content-Type'] // 让浏览器自动设置Content-Type

        const response = await axios.post(
            `/api/house-images`,
            formData,
            { headers }
        )

        if (response.data.code !== 0) {
          throw new Error(response.data.msg || '上传图片失败')
        }
      }
    }


    // 2. 更新房源信息
    const updateData = {
      title: house.value.house.title,
      property_type: house.value.house.property_type,
      rental_type: house.value.house.rental_type,
      area: house.value.house.area,
      price: house.value.house.price,
      deposit: house.value.house.deposit,
      bedroom_count: house.value.house.bedroom_count,
      livingroom_count: house.value.house.livingroom_count,
      bathroom_count: house.value.house.bathroom_count,
      description: house.value.house.description,
      status: house.value.house.status,
      province: house.value.address.province,
      city: house.value.address.city,
      district: house.value.address.district,
      street: house.value.address.street,
      detail: house.value.address.detail,
      ...house.value.facility
    }

    const response = await axios.put(
        `/api/houses/${houseId.value}`,
        updateData,
        { headers: common_util.accessHeader() }
    )

    if (response.data.code === 0) {
      ElMessage.success('房源信息更新成功')
      await fetchHouseDetail()
      isEditing.value = false
      newImages.value = []
    } else {
      ElMessage.error(response.data.msg || '更新失败')
    }
  } catch (error) {
    ElMessage.error('更新失败')
    console.error(error)
  } finally {
    saving.value = false
  }
}

// 获取所有图片URL
const getAllImages = () => {
  return galleryImages.value.filter(img => img.image_url).map(img => img.image_url)
}

// 状态显示
const getStatusLabel = (status) => {
  return statusMap[status]?.label || status
}

const getStatusTagType = (status) => {
  return statusMap[status]?.type || ''
}

// 地址格式化
const formatFullAddress = (address) => {
  if (!address) return '未设置地址'
  return `${address.province || ''}${address.city || ''}${address.district || ''}${address.street || ''}${address.detail || ''}`
}

// 格式化评价时间
const formatReviewTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString()
}

// 设施图标
const getFacilityIcon = (key) => {
  return facilityIcons[key] || House
}

// 设施标签
const getFacilityLabel = (key) => {
  return facilityLabels[key] || key
}

// 返回列表
const goBack = () => {
  router.push({ name: 'my-houses' })
}

// 删除房源
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确定删除该房源吗？删除后不可恢复', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const response = await axios.delete(`/api/houses/${house.value.house?.houseid}`, {
      headers: common_util.accessHeader()
    })

    if (response.data.code === 0) {
      ElMessage.success('删除成功')
      router.push({ name: 'my-houses' })
    } else {
      ElMessage.error(response.data.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 图片点击事件
const handleImageClick = (image) => {
  if (!isEditing.value) {
    // 非编辑模式下点击图片预览
    const images = getAllImages()
    const index = images.indexOf(image.image_url)
    if (index !== -1) {
      // 触发图片预览
      document.querySelectorAll('.el-image__inner')[index]?.click()
    }
  }
}

onMounted(() => {
  fetchHouseDetail()
})
</script>

<style scoped>
.house-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.back-button {
  margin-right: 12px;
  padding: 8px 0;
}

.title {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  color: #333;
  flex-grow: 1;
}

.status-tag {
  margin-left: 12px;
}

.status-tag .el-tag {
  font-size: 14px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
}

.form-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.form-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.form-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.tab-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.image-section {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-carousel {
  border-radius: 8px;
}

.el-carousel :deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
}

.el-carousel :deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.5);
}

.el-image {
  transition: transform 0.3s;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.el-image:hover {
  transform: scale(1.02);
}

.cover-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 2;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.image-error .el-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* 新增图片操作按钮样式 */
.image-actions {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.image-actions .el-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area {
  margin-top: 16px;
  text-align: center;
}

.upload-area :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 148px;
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-area :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.upload-text {
  margin-top: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.map-container {
  height: 200px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.map-placeholder .el-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.facility-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  height: 40px;
}

.facility-item .available {
  color: #67C23A;
}

.facility-item .unavailable {
  color: #F56C6C;
  opacity: 0.6;
}

.facility-item .el-icon {
  font-size: 18px;
}

.facility-item .el-checkbox {
  width: 100%;
  margin-left: 0;
}

.facility-item .el-checkbox :deep(.el-checkbox__label) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-summary {
  font-size: 14px;
  margin-bottom: 16px;
}

.average-rating {
  color: #f56c6c;
  font-weight: bold;
  margin-right: 4px;
}

.review-count {
  color: #999;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  padding: 16px;
  border-radius: 6px;
  background-color: #fafafa;
  border: 1px solid #eee;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.user-id {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.review-time {
  color: #999;
  font-size: 12px;
}

.review-ratings {
  margin-bottom: 12px;
}

.review-ratings > span {
  font-weight: 500;
  color: #409EFF;
  font-size: 14px;
}

.rating-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: #666;
}

.rating-details span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-comment {
  padding: 12px;
  background-color: white;
  border-radius: 4px;
  line-height: 1.6;
  font-size: 14px;
  color: #333;
  border-left: 3px solid #409EFF;
}

.no-reviews {
  padding: 40px 0;
  text-align: center;
}

.pagination {
  margin-top: 20px;
  justify-content: center;
}

.form-actions {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
}

.form-actions .el-button {
  min-width: 120px;
  padding: 12px 24px;
  font-size: 15px;
}

.form-actions .el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.form-actions .el-button--success {
  background-color: #67C23A;
  border-color: #67C23A;
}

/* 自定义滚动条 */
.tab-content::-webkit-scrollbar {
  width: 6px;
}

.tab-content::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.tab-content::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .house-detail-container {
    padding: 10px;
    height: calc(100vh - 20px);
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .form-actions .el-button {
    width: 100%;
  }
}
</style>